import React, { Component } from "react";
import Input from "./Input";
import List from "./List";
/**
 * 状态提升:
 * react的单向数据流:只能是父组件传给子组件
 */

export default class Todo extends Component {
    // 程序进来先获取本地存储的内容,如果有就赋值给状态,如果没有就要赋给相应的空初始值
    state = { arr: JSON.parse(localStorage.getItem("todolist")) || [] };

    // inp = (type) => {
    //     return (e) => {
    //         this.setState({ [type]: e.target.value });
    //     };
    // };

    // 实现删除功能
    deletei = (index) => {
        console.log(index);
        this.setState(
            {
                arr: this.state.arr.filter((val, ind) => ind !== index),
            },
            () => {
                localStorage.setItem(
                    "todolist",
                    JSON.stringify(this.state.arr)
                );
            }
        );
    };
    enterp = (e) => {
        if (e.keyCode === 13) {
            let val = e.target.value;

            //不建议这么写
            /*  this.state.arr.push(e.target.value);push方法返回的是新数组的长度
            unshift是向数组头部加一个元素
            this.state.arr.unshift(e.target.value);
            this.setState({ arr: this.state.arr }); */

            // setState是异步的方法
            this.setState({ arr: [val, ...this.state.arr] }, () => {
                localStorage.setItem(
                    "todolist",
                    JSON.stringify(this.state.arr)
                );
            }); //将一个新的数组赋值给arr,采用展开运算符

            // 实现按回车之后输入框的内容为空
            e.target.value = "";

            // 实现本地存储
            // 如果不想放在回调函数里,就别存this.state.list
            // localStorage.setItem("todolist", JSON.stringify(this.state.arr));
        }
    };
    render() {
        return (
            <div>
                <Input enter={this.enterp} />
                <List data={this.state.arr} deletei={this.deletei} />
                {/* 把当前状态传给子组件 */}
            </div>
        );
    }
}
